﻿
@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
@section css {
    <script src="~/Assets/js/base/echart.min.js"></script>
    <link href="~/Assets/css/searchmodal.css" rel="stylesheet" />
    <link href="~/Assets/css/mui.picker.min.css" rel="stylesheet" />
    <script src="~/Assets/js/mui.picker.js"></script>
    <script src="~/Assets/js/mui.dtpicker.js"></script>
    <style>

        .mui-bar ~ .mui-content .mui-scroll-wrapper {
            top: 44px;
            height: auto;
        }
    </style>
}
<header class="mui-bar mui-bar-nav">
    <a href="../CheckForm/MCheckMenu" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a id="menu-btn" class="mui-action-menu mui-icon mui-icon-search mui-pull-right"></a>
    <h1 class="mui-title" style="color:white;">数智总览</h1>
</header>
<div class="mui-content-padded" ng-cloak ng-controller="CheckFormController" ng-init="
     InitDatePicker('#starttime');
     InitDatePicker('#endtime');
     SearchModel={};
     SearchModel.Type=3;
     SearchModel.StartTime='@DateTime.Now.ToString("yyyy-MM-01")';
     SearchModel.EndTime='@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd")';
     GetDailyCheckStatus(SearchModel);
     ">
    <div style="height:50px;"></div>
    <p>
        &nbsp;&nbsp;&nbsp;时间范围：{{ SearchModel.StartTime}}~{{SearchModel.EndTime}}
    </p>
    @*<div class="mui-card">
            <p style="font-weight:bold;margin:10px;">检查情况</p>
            <p style="margin-left:10px;color:black;">日检：<span class="mui-badge" ng-show="CheckStatusList.DailyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="CheckStatusList.DailyCount>0">{{CheckStatusList.DailyCount}}</span></p>
            <p style="margin-left: 10px; color: black;">周检：<span class="mui-badge" ng-show="CheckStatusList.WeeklyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="CheckStatusList.WeeklyCount>0">{{CheckStatusList.WeeklyCount}}</span></p>
            <p style="margin-left: 10px; color: black;">月检：<span class="mui-badge" ng-show="CheckStatusList.MonthlyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="CheckStatusList.MonthlyCount>0">{{CheckStatusList.MonthlyCount}}</span></p>
            <p style="margin-left: 10px; color: black;">异常：<span class="mui-badge" ng-show="CheckStatusList.ExcepetionCount==0">0</span><span class="mui-badge mui-badge-red" ng-show="CheckStatusList.ExcepetionCount>0">{{CheckStatusList.ExcepetionCount}}</span></p>
        </div>*@

    <div class="mui-card" id="checkchart" style="height:200px;">

    </div>

    <div class="mui-card" id="depchart">

    </div>
    <div class="mui-card" ng-show=" SearchModel.Type==1">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse" ng-repeat="x in CheckStatusList.DetailList">
                <a class="mui-navigate-right">
                    {{x.DepName}}<br />
                    <p>
                        <b>应检</b>
                        &nbsp;日检：<span class="mui-badge mui-badge-success">{{x.TaskCount[0]}}</span>
                        &nbsp;周检：<span class="mui-badge mui-badge-success">{{x.TaskCount[1]}}</span>
                        &nbsp;月检：<span class="mui-badge mui-badge-success">{{x.TaskCount[2]}}</span>
                    </p>
                    <p>
                        <b>实检</b>
                        &nbsp;日检：<b ng-show="x.DailyCount==0" style="color:gray;">{{x.DailyCount}}</b><b ng-show="x.DailyCount>0" style="color:blue;">{{x.DailyCount}}</b>&nbsp;&nbsp;
                        &nbsp; 周检：<b ng-show="x.WeeklyCount==0" style="color: gray;">{{x.WeeklyCount}}</b><b ng-show="x.WeeklyCount>0" style="color:blue;">{{x.WeeklyCount}}</b>&nbsp;&nbsp;
                        &nbsp; 月检：<b ng-show="x.MonthlyCount==0" style="color: gray;">{{x.MonthlyCount}}</b><b ng-show="x.MonthlyCount>0" style="color:blue;">{{x.MonthlyCount}}</b>&nbsp;&nbsp;
                        &nbsp; 异常：<b ng-show="x.ExcepetionCount==0" style="color: gray;">{{x.ExcepetionCount}}</b><b ng-show="x.ExcepetionCount>0" style="color:red;">{{x.ExcepetionCount}}</b>
                    </p>

                </a>
                <div class="mui-collapse-content">
                    <div ng-repeat="y in x.PlaceList">
                        <h5 style="color:black; margin-top:10px;">{{$index+1}}.{{y.PlaceName}}</h5>
                        <p><b>应检</b> <span ng-repeat-start="z in y.TaskCount">&nbsp;{{z.TypeName}}：</span><span ng-repeat-end="z in y.TaskCount" class="mui-badge mui-badge-success">{{z.Count}}</span></p>
                        <p>
                            <b>实检</b>
                            &nbsp;日检：<span class="mui-badge" ng-show="y.DailyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.DailyCount>0">{{y.DailyCount}}</span>
                            &nbsp;周检：<span class="mui-badge" ng-show="y.WeeklyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.WeeklyCount>0">{{y.WeeklyCount}}</span>
                            &nbsp;月检：<span class="mui-badge" ng-show="y.MonthlyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.MonthlyCount>0">{{y.MonthlyCount}}</span>
                            &nbsp;异常：<span class="mui-badge" ng-show="y.ExcepetionCount==0">0</span><span class="mui-badge mui-badge-red" ng-show="y.ExcepetionCount>0">{{y.ExcepetionCount}}</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="mui-card" ng-show=" SearchModel.Type==2">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse" ng-repeat="x in CheckStatusList.DetailList">
                <a class="mui-navigate-right">
                    {{x.TypeName}}<br />
                    <p>
                        <b>应检</b>
                        &nbsp;日检：<span class="mui-badge mui-badge-success">{{x.TaskCount[0]}}</span>
                        &nbsp;周检：<span class="mui-badge mui-badge-success">{{x.TaskCount[1]}}</span>
                        &nbsp;月检：<span class="mui-badge mui-badge-success">{{x.TaskCount[2]}}</span>
                    </p>
                    <p>
                        <b>实检</b>
                        &nbsp;日检：<b ng-show="x.DailyCount==0" style="color:gray;">{{x.DailyCount}}</b><b ng-show="x.DailyCount>0" style="color:blue;">{{x.DailyCount}}</b>&nbsp;&nbsp;
                        &nbsp;周检：<b ng-show="x.WeeklyCount==0" style="color: gray;">{{x.WeeklyCount}}</b><b ng-show="x.WeeklyCount>0" style="color:blue;">{{x.WeeklyCount}}</b>&nbsp;&nbsp;
                        &nbsp;月检：<b ng-show="x.MonthlyCount==0" style="color: gray;">{{x.MonthlyCount}}</b><b ng-show="x.MonthlyCount>0" style="color:blue;">{{x.MonthlyCount}}</b>&nbsp;&nbsp;
                        &nbsp;异常：<b ng-show="x.ExcepetionCount==0" style="color: gray;">{{x.ExcepetionCount}}</b><b ng-show="x.ExcepetionCount>0" style="color:red;">{{x.ExcepetionCount}}</b>
                    </p>
                </a>
                <div class="mui-collapse-content">
                    <div ng-repeat="y in x.PlaceList">
                        <h5 style="color:black; margin-top:10px;">{{$index+1}}.{{y.PlaceName}}</h5>
                        <p><b>应检</b> <span ng-repeat-start="z in y.TaskCount">&nbsp;{{z.TypeName}}：</span><span ng-repeat-end="z in y.TaskCount" class="mui-badge mui-badge-success">{{z.Count}}</span></p>
                        <p>
                            <b>实检</b>
                            &nbsp;日检：<span class="mui-badge" ng-show="y.DailyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.DailyCount>0">{{y.DailyCount}}</span>
                            &nbsp;周检：<span class="mui-badge" ng-show="y.WeeklyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.WeeklyCount>0">{{y.WeeklyCount}}</span>
                            &nbsp;月检：<span class="mui-badge" ng-show="y.MonthlyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.MonthlyCount>0">{{y.MonthlyCount}}</span>
                            &nbsp; 异常：<span class="mui-badge" ng-show="y.ExcepetionCount==0">0</span><span class="mui-badge mui-badge-red" ng-show="y.ExcepetionCount>0">{{y.ExcepetionCount}}</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="mui-card" ng-show=" SearchModel.Type==3">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse" ng-repeat="x in CheckStatusList.DetailList">
                <a class="mui-navigate-right">
                    {{x.ParkName}}<br />
                    <p>
                        <b>应检</b>
                        &nbsp;日检：<span class="mui-badge mui-badge-success">{{x.TaskCount[0]}}</span>
                        &nbsp;周检：<span class="mui-badge mui-badge-success">{{x.TaskCount[1]}}</span>
                        &nbsp;月检：<span class="mui-badge mui-badge-success">{{x.TaskCount[2]}}</span>
                    </p>
                    <p>
                        <b>实检</b>
                        &nbsp;日检：<b ng-show="x.DailyCount==0" style="color:gray;">{{x.DailyCount}}</b><b ng-show="x.DailyCount>0" style="color:blue;">{{x.DailyCount}}</b>&nbsp;&nbsp;
                        &nbsp;周检：<b ng-show="x.WeeklyCount==0" style="color: gray;">{{x.WeeklyCount}}</b><b ng-show="x.WeeklyCount>0" style="color:blue;">{{x.WeeklyCount}}</b>&nbsp;&nbsp;
                        &nbsp;月检：<b ng-show="x.MonthlyCount==0" style="color: gray;">{{x.MonthlyCount}}</b><b ng-show="x.MonthlyCount>0" style="color:blue;">{{x.MonthlyCount}}</b>&nbsp;&nbsp;
                        &nbsp;异常：<b ng-show="x.ExcepetionCount==0" style="color: gray;">{{x.ExcepetionCount}}</b><b ng-show="x.ExcepetionCount>0" style="color:red;">{{x.ExcepetionCount}}</b>
                    </p>   
                </a>
                <div class="mui-collapse-content">
                    <div ng-repeat="y in x.PlaceList">
                        <h5 style="color:black; margin-top:10px;">{{$index+1}}.{{y.PlaceName}}</h5>
                        <p><b>应检</b> <span ng-repeat-start="z in y.TaskCount">&nbsp;{{z.TypeName}}：</span><span ng-repeat-end="z in y.TaskCount" class="mui-badge mui-badge-success">{{z.Count}}</span></p>
                        <p>
                            <b>实检</b>
                            日检：<span class="mui-badge" ng-show="y.DailyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.DailyCount>0">{{y.DailyCount}}</span>
                            周检：<span class="mui-badge" ng-show="y.WeeklyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.WeeklyCount>0">{{y.WeeklyCount}}</span>
                            月检：<span class="mui-badge" ng-show="y.MonthlyCount==0">0</span><span class="mui-badge mui-badge-primary" ng-show="y.MonthlyCount>0">{{y.MonthlyCount}}</span>
                            异常：<span class="mui-badge" ng-show="y.ExcepetionCount==0">0</span><span class="mui-badge mui-badge-red" ng-show="y.ExcepetionCount>0">{{y.ExcepetionCount}}</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div style="height:40px;"></div>

    <div id="menu-wrapper" class="menu-wrapper hidden" ng-init="">
        <div id="menu" class="menu">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>开始日期</label>
                    <input type="text" id="starttime" data-options='{"type":"date"}' ng-model="SearchModel.StartTime" readonly>
                </div>
                <div class="mui-input-row">
                    <label>结束日期</label>
                    <input type="text" id="endtime" data-options='{"type":"date"}' ng-model="SearchModel.EndTime" readonly>
                </div>
                <div class="mui-input-row mui-radio">
                    <label>部门视图</label>
                    <input name="radio1" type="radio" ng-click="SearchModel.Type=1;GetDailyCheckStatus(SearchModel);" ng-checked="SearchModel.Type==1">
                </div>
                <div class="mui-input-row mui-radio">
                    <label>类型视图</label>
                    <input name="radio1" type="radio" ng-click="SearchModel.Type=2;GetDailyCheckStatus(SearchModel);" ng-checked="SearchModel.Type==2">
                </div>
                <div class="mui-input-row mui-radio">
                    <label>园区视图</label>
                    <input name="radio1" type="radio" ng-click="SearchModel.Type=3;GetDailyCheckStatus(SearchModel);" ng-checked="SearchModel.Type==3">
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" onclick="toggleMenu();" ng-click="GetDailyCheckStatus(SearchModel);">确认</button>
                </div>
            </form>
        </div>
    </div>
    <div id="menu-backdrop" class="menu-backdrop"></div>
</div>

@section js{
    <script src="~/Assets/js/pg/MCheckForm.js"></script>
    <script>

        mui.init({
            swipeBack: false,
            keyEventBind: {
                backbutton: false  //关闭back按键监听
            }
        });

        var menuWrapper = document.getElementById("menu-wrapper");
        var menu = document.getElementById("menu");
        var menuWrapperClassList = menuWrapper.classList;
        var backdrop = document.getElementById("menu-backdrop");
        var info = document.getElementById("info");

        backdrop.addEventListener('tap', toggleMenu);
        document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
        //document.getElementById("icon-menu").addEventListener('tap', toggleMenu)
        //下沉菜单中的点击事件
        mui('#menu').on('tap', 'a', function () {
            toggleMenu();
            info.innerHTML = '你已选择：' + this.innerHTML;
        });
        var busying = false;

        function toggleMenu() {
            if (busying) {
                return;
            }
            busying = true;
            if (menuWrapperClassList.contains('mui-active')) {
                document.body.classList.remove('menu-open');
                menuWrapper.className = 'menu-wrapper fade-out-up animated';
                menu.className = 'menu bounce-out-up animated';
                setTimeout(function () {
                    backdrop.style.opacity = 0;
                    menuWrapper.classList.add('hidden');
                }, 500);
            } else {
                document.body.classList.add('menu-open');
                menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
                menu.className = 'menu bounce-in-down animated';
                backdrop.style.opacity = 1;
            }
            setTimeout(function () {
                busying = false;
            }, 500);
        }
    </script>
}
